<template>
  <a-modal
    v-model:visible="visible"
    :loading="loading"
    width="1000px"
    :footer="null"
  >
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      :pagination="{ pageSize: 5 }"
      :scroll="{ y: 240 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'name'"></template>
        <template v-else-if="column.dataIndex === 'operation'">
          <a-button type="primary" @click="onUpdate(record)">修改</a-button>
        </template>
      </template>
      <template #title>事件更新</template>
    </a-table>
  </a-modal>
  <a-popover v-model:visible="uvisible" trigger="click" placement="rightTop">
    <template #content>
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item
          label="事件编号"
          name="事件编号"
          :rules="[{ required: true, message: '输入不能为空!' }]"
        >
          <a-input v-model:value="formState.value.事件编号" />
        </a-form-item>
        <a-form-item
          label="事件类型"
          name="事件类型"
          :rules="[{ required: true, message: '输入不能为空!' }]"
        >
          <a-input v-model:value="formState.value.事件类型" />
        </a-form-item>
        <a-form-item
          label="事件等级"
          name="事件等级"
          :rules="[{ required: true, message: '输入不能为空!' }]"
        >
          <a-input v-model:value="formState.value.事件等级" />
        </a-form-item>
        <a-form-item
          label="发生时间"
          name="发生时间"
          :rules="[{ required: true, message: '输入不能为空!' }]"
        >
          <a-input v-model:value="formState.value.发生时间" />
        </a-form-item>
        <a-form-item
          label="发生地点"
          name="发生地点"
          :rules="[{ required: true, message: '输入不能为空!' }]"
        >
          <a-input v-model:value="formState.value.发生地点" />
        </a-form-item>
        <a-form-item
          label="车牌号"
          name="车牌号"
          :rules="[{ required: true, message: '输入不能为空!' }]"
        >
          <a-input v-model:value="formState.value.车牌号" />
        </a-form-item>
        <a-form-item
          label="驾驶员"
          name="驾驶员"
          :rules="[{ required: true, message: '输入不能为空!' }]"
        >
          <a-input v-model:value="formState.value.驾驶员" />
        </a-form-item>
        <a-form-item label="处理状态" name="处理状态">
          <a-select
            v-model:value="formState.value.处理状态"
            :options="options"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" @click="handleClick">确认</a-button>
          <a-button style="margin-left: 10px" @click="resetClick">
            取消
          </a-button>
        </a-form-item>
      </a-form>
    </template>
  </a-popover>
</template>
<script setup>
import mitt from '@/mitt'
import { onUnmounted, ref, onMounted, reactive, computed } from 'vue'
import { QEvent } from '@/Hooks/QEvent'
import { QUpdate } from '@/Hooks/QUpdate'
const { map } = defineProps({
  map: {
    type: Object,
  },
})
const uvisible = ref(false)
const formState = reactive({})
const options = ref([
  {
    value: '0',
    label: '未处理',
  },
  {
    value: '1',
    label: '已处理',
  },
  {
    value: '2',
    label: '忽略',
  },
])
//导入数据和方法
const { queryBox, visible, loading, data, evisible } = QEvent()
const { Update } = QUpdate()
const columns = [
  {
    title: '事件编号',
    dataIndex: '事件编号',
    width: 140,
  },
  {
    title: '事件类型',
    dataIndex: '事件类型',
  },
  {
    title: '事件等级',
    dataIndex: '事件等级',
  },
  {
    title: '发生时间',
    dataIndex: '发生时间',
  },
  {
    title: '发生地点',
    dataIndex: '发生地点',
  },
  {
    title: '车牌号',
    dataIndex: '车牌号',
  },
  {
    title: '驾驶员',
    dataIndex: '驾驶员',
  },
  {
    title: '处理状态',
    dataIndex: '处理状态',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
]
// const statu = ref(0)
//修改按钮
const onUpdate = (e) => {
  console.log(e)
  //显示popover
  uvisible.value = true
  formState.value = e
}
//确定
const handleClick = () => {
  Update(map, formState)
  uvisible.value = false
}
//取消
const resetClick = () => {
  uvisible.value = false
}
//事件更新
const updateEvent = () => {
  queryBox(map)
}
mitt.on('updateEvent', updateEvent) //监听更新事件
onUnmounted(() => {
  mitt.off('updateEvent', updateEvent)
})
</script>

<style scoped>
#main {
  width: 450px;
  height: 400px;
}
</style>
